<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>系统介绍</title>
    <link rel="stylesheet" href="./static/css/xswz.css">
    <!-- 鼠标点击文字显示效果css代码-->
    <link rel="stylesheet" href="../public_static/css/mouse_click_effect.css">
</head>
<body>
    <header>
        <div class="carousel-container">
            <!-- 轮播图幻灯片 -->
            <div class="carousel-slides">
                <div class="carousel-slide" style="background-image: url('./static/images/xswz/最上面那张图.avif');"></div>
                <div class="carousel-slide" style="background-image: url('./static/images/xswz/第二张图片.jpg');"></div>
                <div class="carousel-slide" style="background-image: url('./static/images/xswz/3个显示屏的桌面.jpeg');"></div>
                <div class="carousel-slide" style="background-image: url('./static/images/xswz/平潭海边高架桥照片.jpg');"></div>
                <!-- 可以添加更多图片 -->
            </div>
            
            <!-- 控制按钮 -->
            <button class="carousel-control prev">❮</button>
            <button class="carousel-control next">❯</button>
            
            <!-- 指示器 -->
            <div class="carousel-indicators">
                <span class="indicator active" data-index="0"></span>
                <span class="indicator" data-index="1"></span>
                <span class="indicator" data-index="2"></span>
                <span class="indicator" data-index="3"></span>
                <!-- 与幻灯片数量对应 -->
            </div>
            
            <!-- 标题内容 -->
            <div class="header-content">
                <h1>PTBS - 葱花的技术博客系统</h1>
                <p>Personal Technical Blog System - 记录Electron学习历程与技术成长</p>
            </div>
        </div>
    </header>

    <div class="container">

        <section class="notice">
            <h2>最新公告</h2>
            <p id="latestNotice">加载中...</p> <!-- 这里将被动态替换 -->
        </section>

        <section class="introduce">
            <h2>系统简介</h2>
            <p>PTBS（Personal Technical Blog System）是一款基于Electron框架开发的个人技术博客系统，定位为开发者的学习"文件夹"。系统以"想到什么就写什么"为核心理念，整合了文章管理、代码展示、数据库本地部署等功能模块，为技术学习与沉淀提供全方位支持。</p>
        </section>

        <section>
            <h2>核心功能</h2>
            <ul class="article-list">
                <li>
                    <strong>数据本地存储</strong>：集成SQL数据库本地部署功能，支持表单数据的收集与增删查改操作，保障数据安全性与访问效率。
                </li>
                <li>
                    <strong>开发历程追踪</strong>：内置开发者日志模块，通过版本迭代记录（release）、功能新增（feature）、问题修复（bug）等维度，完整呈现系统演进过程。
                </li>
            </ul>
        </section>

        <!-- 这里可以加内容
        <section>
            <h2>示例</h2>
            <p>示例</p>
        </section>
        -->
    </div>

    
    <!-- 实现轮播图的效果 -->
    <script src="./static/js/pic_show_xswz.js"></script>

    <!-- 鼠标点击文字显示效果js代码-->
    <script src="../public_static/js/mouse_click_effect.js"></script>

    <script>
        // 从数据库获取最新公告
        async function loadLatestNotice() {
            try {
                // 通过Electron API从数据库获取所有日志条目
                const timelineEntries = await window.electronAPI.getTimelineEntries();
                
                // 过滤有效日期格式的条目（支持多种中文日期格式）
                const validEntries = timelineEntries.filter(item => {
                    if (!item.date) return false;
                    
                    // 支持的日期格式正则：YYYY年MM月DD日 或 YYYY-MM-DD 或 YYYY/MM/DD
                    const datePattern = /^\d{4}([年/-])\d{1,2}\1\d{1,2}(日)?$/;
                    return datePattern.test(item.date.trim());
                });

                // 按日期排序（最新的在前）
                validEntries.sort((a, b) => {
                    // 统一转换为可比较的日期格式
                    const normalizeDate = (dateStr) => {
                        // 处理中文格式：2023年10月5日 → 2023-10-05
                        if (dateStr.includes('年')) {
                            return dateStr.replace('年', '-')
                                        .replace('月', '-')
                                        .replace('日', '')
                                        .padStart(10, '0'); // 确保月份和日期为两位数
                        }
                        // 处理其他格式：2023-10-5 → 2023-10-05
                        const parts = dateStr.split(/[-/]/).map(p => p.padStart(2, '0'));
                        return parts.join('-');
                    };

                    const dateA = new Date(normalizeDate(a.date));
                    const dateB = new Date(normalizeDate(b.date));
                    
                    // 日期无效时排在前面（视为较新）
                    if (isNaN(dateA.getTime()) && isNaN(dateB.getTime())) return 0;
                    if (isNaN(dateA.getTime())) return -1;
                    if (isNaN(dateB.getTime())) return 1;
                    
                    return dateB - dateA; // 降序排列
                });

                // 更新页面显示
                const noticeElement = document.getElementById('latestNotice');
                if (validEntries.length > 0) {
                    const latestEntry = validEntries[0];
                    // 格式化显示文本，优先使用content，无content则使用title
                    const displayText = latestEntry.content || latestEntry.title || '无内容';
                    noticeElement.textContent = `[${latestEntry.date}] ${displayText}`;
                } else {
                    noticeElement.textContent = '暂无公告信息';
                }
            } catch (error) {
                console.error('获取公告失败:', error);
                document.getElementById('latestNotice').textContent = '公告加载失败';
            }
        }

        // 页面加载完成后执行
        document.addEventListener('DOMContentLoaded', loadLatestNotice);
    </script>

</body>
</html>